import React from 'react'
import Condition from 'components/condition'
const { If, ElseIf, Else } = Condition;
import { Switch, Button, Radio } from 'antd'
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

export default {
  key: 'condition',
  name: 'Condition 条件',
  author: '张然',
  description: '条件渲染组件，其中::If::可以单独使用，但是如果要搭配::ElseIf::、::ELse::需要在::Condition::组件内。',
  isExampleFull: false,
  api: [
    {
      title: 'If与ElseIf的API',
      data: [{
        param: 'value', description: '控制内容是否显示', type: 'boolean', defaultValue: 'true'
      }],
      description: '注意！一个::Condition::内只允许一套::If-Else::存在且必须为直接子元素，多套存在或不是直接子元素会展示不正常。而且::If::、::Else::中间可以穿插其他内容,虽然可以，但是尽量不要这么写。'
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '用::If::判断是否显示。',
      state: {
        value: true
      },
      getMethod: context => {
        return {
          handleChange: value => {
            context.setState({ value })
          }
        }
      },
      getContent: context => {
        const { value } = context.state;
        return (
          <div>
            <Switch onChange={context.handleChange} checked={value}/>点击隐藏/显示下方内容
            <br/><br/>
            <If value={value}>
              需要控制显示的内容
              <br/>
              <Button>这个按钮也包括</Button>
            </If>
          </div>
        )
      }
    },
    {
      title: '多条件用法',
      description: '用::If::，::ElseIf::，::Else::判断是否显示。',
      state: {
        value: '7'
      },
      getMethod: context => {
        return {
          handleChange: e => {
            context.setState({ value: e.target.value })
          }
        }
      },
      getContent: context => {
        const { value } = context.state;
        return (
          <div>
            <ol>
              <li>If ≥6</li>
              <li>ElseIf ≥5</li>
              <li>ElseIf ≥3</li>
              <li>Else</li>
            </ol>
            <br/>
            <RadioGroup onChange={context.handleChange} value={value}>
              <RadioButton value="1">1</RadioButton>
              <RadioButton value="2">2</RadioButton>
              <RadioButton value="3">3</RadioButton>
              <RadioButton value="4">4</RadioButton>
              <RadioButton value="5">5</RadioButton>
              <RadioButton value="6">6</RadioButton>
              <RadioButton value="7">7</RadioButton>
            </RadioGroup>
            <br/>
            <Condition>
              <If value={value >= 6}>≥6</If>
              <ElseIf value={value >= 5}>≥5</ElseIf>
              <ElseIf value={value >= 3}>≥3</ElseIf>
              <Else>&lt;3</Else>
            </Condition>
          </div>
        )
      }
    }
  ]
}
